<template>
  <div class="assets-panel">
    <div class="assets-panel-wrap">
      <div class="assets-count">
        <span class="title">用户总资产</span>
        <count-to
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.all_total_capital || 0"
          :duration="300"
          v-if="countShow"
          class="card-panel-num"
        />
        <span v-else class="card-panel-num">******</span>
      </div>
      <div class="assets-count">
        <span class="title">可用余额（代理钱包）</span>
        <count-to
          v-if="countShow"
          :start-val="0"
          :decimals="2"
          :end-val="+accountInfo.usable_capital || 0"
          :duration="300"
          class="card-panel-num"
        />
        <span v-else class="card-panel-num">******</span>
      </div>
      <div class="btn-wrapper">
        <el-button class="assets-btn assets-btn-tx" @click="openRcharge('tx')">提现</el-button>
        <el-button type="primary" class="assets-btn assets-btn-cz" @click="openRcharge('cz')">充值</el-button>
        <el-button
          v-show="other_role != 'ORDINARY'"
          class="assets-btn assets-btn-tx"
          @click="openTransfer"
        >互转</el-button>
      </div>
    </div>
    <span class="show-count" @click="showCount">
      <svg-icon :icon-class="countShow ? 'eye-open' : 'eye'" />
    </span>
    <!-- 充值提现 -->
    <el-dialog
      :visible.sync="showFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :before-close="rchargeClose"
      width="520px"
      custom-class="{'noBorder-dialog-wrap':quotaFlag}"
    >
      <span slot="title" class="dialog-title">
        <i></i>
        <span>{{dialogTitleFlag}}</span>
      </span>

      <!-- loadimg -->

      <!-- 充值/提现form表单 -->
      <div v-if="!quotaFlag" class="dialog-content">
        <div v-if="!cardHandleFlag" class="content-top">
          <div class="record-btn" style="display:none">
            <img src alt />
            <span>{{dialogText}}记录</span>
          </div>
          <div class="balance-box">
            <div class="balance-num">
              <span class="rmb">￥</span>
              <count-to
                :start-val="0"
                :decimals="2"
                :end-val="+accountInfo.usable_capital || 0"
                :duration="300"
                class="card-panel-num"
              />
            </div>
            <div class="balance-text">
              <img src alt />
              <span>可用余额</span>
            </div>
          </div>
        </div>

        <div
          class="content-form"
          v-loading="loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form>
            <!-- 企业账户 || 法人账户提现方式 -->
            <el-form-item
              v-if="dialogType == 'tx' && memberInfo.yst_user_type == 2 && !cardHandleFlag"
              label="提现方式："
            >
              <el-radio-group v-model="accountType">
                <el-radio :label="0">企业账户</el-radio>
                <el-radio :label="1">法人账户</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 充值方式 -->
            <el-form-item v-if="dialogType == 'cz' && !cardHandleFlag " label="充值方式：">
              <el-radio-group
                v-model="accountType"
                :class="{'group-style': memberInfo.yst_user_type == 2 && dialogType == 'cz'}"
              >
                <el-radio v-if="memberInfo.yst_user_type == 2" :label="0">企业账户</el-radio>
                <el-radio :label="1">个人网银</el-radio>
                <el-radio :label="2">快捷支付</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 企业对公账户 -->
            <el-form-item
              v-if="memberInfo.yst_user_type == 2 && !accountType  && !cardHandleFlag"
              label="开户银行名称："
            >
              <el-input v-model="companyCardInfo.parentBankName" disabled></el-input>
            </el-form-item>
            <el-form-item
              v-if="memberInfo.yst_user_type == 2 && !accountType  && !cardHandleFlag"
              label="企业对公账户："
            >
              <el-input v-model="companyCardInfo.accountNo" disabled></el-input>
            </el-form-item>
            <!-- 已绑定银行卡 -->
            <el-form-item
              v-if="accountType  &&  binkCardInfo.cardType && !cardHandleFlag && (accountType==2 || dialogType=='tx')"
              label="银行卡："
            >
              <el-input v-model="showCard" disabled></el-input>
              <span class="unbound" @click="unboundHandle('jb')">解绑</span>
            </el-form-item>
            <!-- 未绑定银行卡 -->
            <el-form-item
              v-else-if="accountType  && !binkCardInfo.cardType && !cardHandleFlag && (accountType==2 || dialogType=='tx')"
              label="银行卡："
            >
              <el-input class="noCard-inp" disabled placeholder="尚未绑定银行卡"></el-input>
              <span class="addCard-btn" @click="unboundHandle('bd')">绑定银行卡</span>
            </el-form-item>
            <!-- 解绑银行卡 -->
            <el-form-item v-else-if="cardHandleFlag && binkCardInfo.cardType" label="银行卡号：">
              <p class="cardNumber-p">{{showCard}}</p>
              <span
                v-if="binkCardInfo.parentBankName"
                class="bankName"
              >{{binkCardInfo.parentBankName}}</span>
            </el-form-item>
            <!-- 绑定银行卡 -->
            <el-form-item v-else-if="cardHandleFlag && !binkCardInfo.cardType" label="银行卡号：">
              <el-input
                v-model="bindCardParams.cardNo"
                placeholder="请输入银行卡号"
                oninput="value=value.replace(/[^\d]/g, '')"
              ></el-input>
              <span class="supportBank" @click="supportBankHandle">支持银行</span>
            </el-form-item>
            <el-form-item v-if="cardHandleFlag && !binkCardInfo.cardType" label="预留手机号：">
              <el-input
                v-model="binkCardInfo.ystMobile"
                placeholder="请输入预留手机号"
                maxlength="11"
                oninput="value=value.replace(/[^\d]/g, '')"
              ></el-input>
            </el-form-item>
            <!-- 提现金额 -->
            <el-form-item v-if="!cardHandleFlag && dialogType == 'tx'" label="提现金额：">
              <el-input
                v-model="withdrawalParams.money"
                oninput="value=value.replace(/[^\d.]/g,'')"
                maxlength="11"
                placeholder="请输入提现金额"
              ></el-input>
              <span v-show="serviceCharge" class="supportBank sxf">
                手续费:
                <span
                  v-if="this.withdrawalParams.money * 0.0035 > 2"
                  class="sxfNum"
                >{{serviceCharge}}</span>
                <span v-else class="sxfNum">2.00</span>
                元
              </span>
            </el-form-item>
            <!-- 充值金额 -->
            <el-form-item v-if="!cardHandleFlag && dialogType == 'cz'" label="充值金额：">
              <el-input
                class="code-inp"
                v-model="rechargeParams.money"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="请输入充值金额"
              ></el-input>
              <span class="unbound code-btn quota-btn" @click="quotaHandle">银行限额</span>
            </el-form-item>
            <!-- 短信验证码 -->
            <el-form-item
              v-if=" cardHandleFlag || dialogType == 'tx' && memberInfo.yst_user_type == 2  ||  accountType ==2  && memberInfo.yst_user_type == 2 ||dialogType == 'cz' && accountType ==2"
              label="短信验证码："
            >
              <el-input class="code-inp" v-model="verCode" maxlength="6" placeholder="请输入验证码"></el-input>
              <span v-if="!downShow" class="unbound code-btn" @click="_applybindBandcard">获取验证码</span>
              <span v-else class="unbound code-btn downNum-btn">重新发送（{{downNum + 's'}}）</span>
            </el-form-item>
          </el-form>

          <!-- 提现/充值确认按钮 -->
          <el-button
            v-if="!cardHandleFlag"
            type="primary"
            :class="{'disabled-btn':(!binkCardInfo.cardType  && accountType && dialogType=='tx') || (accountType ==2 && dialogType == 'cz' && !binkCardInfo.cardType)}"
            @click="dealHandle"
          >确认{{dialogText}}</el-button>
          <!-- 解绑/绑定银行卡按钮 -->
          <div v-else class="double-btn-box">
            <el-button class="double-btn-item back-btn" type="primary" @click="backHandle">返回</el-button>
            <el-button
              v-if="binkCardInfo.cardType"
              class="double-btn-item"
              type="primary"
              @click="_unbindBankcard"
            >确认解绑</el-button>
            <el-button v-else class="double-btn-item" type="primary" @click="_bindBankcard">确认绑定</el-button>
          </div>
        </div>
      </div>
      <!-- 查看银行限额 -->
      <div v-else class="quota-content">
        <el-table
          :data="quotaData"
          height="398"
          border
          style="width: 100%"
          :header-cell-style="{background:'#F0F9FC',color:'#999'}"
        >
          <el-table-column prop="bank_code" label="银行列表" align="center"></el-table-column>
          <el-table-column prop="day_limit" label="单日限额" width="160" align="center"></el-table-column>
          <el-table-column prop="single_limit" label="单笔限额" width="160" align="center"></el-table-column>
        </el-table>
        <el-button type="primary" @click="backHandle">返回{{dialogText}}</el-button>
      </div>

      <div slot="footer" class="dialog-footer">
        <div class="footer-wrap">
          <h2>
            <span>*</span>温馨提示
          </h2>
          <div v-if="dialogType=='tx'">
            <p>1. 当天08:00前提现，08:00后到账</p>
            <p>2.当天08:00-24:00期间内，提现实时到账</p>
            <p>3.确保您的银行账号的姓名和网站上的真实姓名一致</p>
            <p>4.每笔提现金额至少为100元以上（如：101元）</p>
            <p>5. 提现金额按照0.35%收取手续费，手续费不足2元时，按2元收取</p>
          </div>
          <div v-else-if="dialogType=='cz'">
            <p class="rcharge-p">
              1.网银充值:单笔充值限额100万，总额不限，如您在银行办理的网上
              支付额度低于此限额，已您的设置为准；
            </p>
            <p class="rcharge-p">
              2.木头云交易禁止信用卡套现，虚假交易等行为，一经发现将予以处
              罚，包括但不限于：限制收款，冻结账户，永久停止服务，并有可能
              影响相关信用记录。
            </p>
          </div>
          <div v-else-if="dialogType=='jb'">
            <p>1.绑定银行卡必须和实名认证信息一致</p>
            <p>2.仅居民身份证实名用户可以绑定</p>
          </div>
          <div v-else-if="dialogType=='bd'">
            <p>1.绑定银行卡必须和实名认证信息一致</p>
            <p>2.仅居民身份证实名用户可以绑定</p>
          </div>

          <div v-else-if="dialogType=='xe'">
            <p>1.当前银行限额信息仅做参考，以实际为准；</p>
            <p>2.充值限额与您的银行卡签约信息、银行额度政策有关，您可咨询相关银行；</p>
            <p>3.针对限额如有疑问，请咨询客服：400-156-8818</p>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 支持银行 -->
    <el-dialog
      :visible.sync="supportBankFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="70%"
      custom-class="supportBank-dialog"
    >
      <span slot="title" class="dialog-title">
        <i></i>
        <span>支持银行</span>
      </span>

      <div class="supportBank-content">
        <div class="supportBank-item" v-for="(item,index) in supportingBanks" :key="index">{{item}}</div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="signFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="360px"
      custom-class="sign-dialog"
    >
      <div class="signFlag-content">
        <img class="signFlag-img" src="@/assets/shape.png" alt />
        <p>完成电子协议签署，才能进行资金交易</p>
        <el-button @click="_ssqSignContract">立即前往</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="transferFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="620px"
      custom-class="transfer-dialog"
      :before-close="transferClose"
    >
      <span slot="title" class="dialog-title">
        <i></i>
        <span>钱包余额互转</span>
      </span>
      <Transfer ref="transfer" @transferClose="transferClose" />
    </el-dialog>
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import {
  checkBankCard,
  getLimitList,
  applybindBankcard,
  bindBankcard,
  applyUnbindBankcard,
  unBindBankcard,
  withdrawBuy,
  rechargeBuy,
  rechargeGetquick,
  rechargeQuickbuy,
  getCompanyCard,
  withdrawBuyCompany,
  resendWithdrawCode,
  confirmWithdrawBuyCompany,
  checkSign,
} from "@/api/rechargeWithDrawal";
import { getCapitalStatistics } from "@/api/capital";
import { ssqSignContract } from "@/api/authentication";
import { mapGetters } from "vuex";
import Transfer from "./transfer";
export default {
  components: {
    CountTo,
    Transfer,
  },
  props: {
    accountInfo: {
      type: Object,
    },
  },
  data() {
    return {
      transferFlag: false,
      signFlag: false,
      loading: false,
      loadingText: "",
      supportBankFlag: false,
      accountType: 2,
      rechargeType: 2,
      downShow: false,
      downNum: "",
      timer: null,
      countShow: false,
      rchargeFlag: false,
      showFlag: false,
      cardHandleFlag: false,
      dialogText: "",
      showCard: "",
      dialogType: "",
      dialogTitle: "",
      recordType: "",
      boundCard: "",
      txORczFlag: null,
      quotaFlag: false,
      quotaData: "",
      verCode: "",
      // 企业对公账户信息
      companyCardInfo: {
        accountNo: "",
        parentBankName: "",
      },
      // 银行卡信息
      binkCardInfo: {
        cardType: "",
        ystMobile: "",
        parentBankName: "",
      },
      // 绑定银行卡参数
      bindCardParams: {
        cardNo: "",
        ystMobile: "",
        code: "",
      },
      // 解绑银行卡参数
      unBindCardParams: {
        cardNo: "",
        ystMobile: "",
        code: "",
      },
      // 提现参数
      withdrawalParams: {
        cardType: "",
        money: "",
      },
      withdraw_id: -1,
      // 企业提现确认参数
      companyWithdrawalParams: {
        withdraw_id: "",
        verificationCode: "",
      },
      // 充值参数
      rechargeParams: {
        cardType: "",
        money: "",
        recharge_id: "",
        code: "",
      },
      // 企业充值参数
      companyRechargeParams: {
        money: "",
        cardType: "",
      },
      checkSignCode: "",
      other_role: "",
    };
  },
  computed: {
    ...mapGetters(["memberInfo", "supportingBanks"]),
    dialogTitleFlag: function () {
      if (this.dialogType == "tx") {
        return (this.dialogTitle = "资金提现");
      } else if (this.dialogType == "cz") {
        return (this.dialogTitle = "账户充值");
      } else if (this.dialogType == "jb") {
        return (this.dialogTitle = "解绑银行卡");
      } else if (this.dialogType == "bd") {
        return (this.dialogTitle = "绑定银行卡");
      } else if (this.dialogType == "xe") {
        return (this.dialogTitle = "银行限额");
      } else {
        return (this.dialogTitle = "");
      }
    },
    serviceCharge: function () {
      if (this.withdrawalParams.money > 0) {
        return (this.withdrawalParams.money * 0.0035).toFixed(2);
      } else {
        return null;
      }
    },
  },
  watch: {
    accountType: function (newVal) {
      this.withdraw_id = -1;
      this.verCode = "";
      if (this.timer) {
        this.downShow = false;
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
  created() {
    this._getLimitList();
    this._getCapitalStatistics();
    // this.memberInfo.yst_user_type = 2;
    // console.log("用户信息", this.memberInfo);
    if (this.memberInfo.yst_user_type == 2) {
      this._checkBankCard();
      this._getCompanyCard();
    } else if (this.memberInfo.yst_user_type == 1) {
      this._checkBankCard();
      // console.log("accountType", this.accountType);
    }
    if (this.binkCardInfo.cardType) {
      let reg = /^(\d{4})\d+(\d{4})$/;
      this.showCard = this.binkCardInfo.cardType.replace(reg, "$1**********$2");
    }
    if (this.$route.params.routerParams) {
      setTimeout(() => {
        this.openRcharge("cz");
      }, 1000);
    }
    this._checkSign(1);
  },
  methods: {
    // 获取资金统计数据
    _getCapitalStatistics() {
      getCapitalStatistics()
        .then((res) => {
          if (res.code == 1 && res.data) {
            this.other_role = res.data.other_role;
            console.log("角色身份", this.other_role);
          } else {
            console.log("资金统计请求错误", res.msg || "请求失败");
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
    // 打开互转
    openTransfer() {
      this.transferFlag = true;
      if (this.$refs.transfer) {
        this.$refs.transfer.fHandle();
      }
    },
    // 关闭互转
    transferClose() {
      this.transferFlag = false;
      this.$emit("getAccountAgain");
    },
    // 签署电子协议
    _ssqSignContract() {
      ssqSignContract().then((res) => {
        if (res.code == 1) {
          window.open(res.data.url, "_self");
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },
    // 获取企业对公账户
    _getCompanyCard() {
      getCompanyCard().then((res) => {
        // console.log("获取企业对公账户", res);
        if (res.code == 1 && res.data) {
          this.companyCardInfo.accountNo = res.data.accountNo;
          this.companyCardInfo.parentBankName = res.data.parentBankName;
        }
      });
    },
    // 检测和得到绑定银行卡信息（个人OR法人）
    _checkBankCard() {
      checkBankCard().then((res) => {
        // console.log("检测绑定银行卡信息", res);
        if (res.data) {
          if (res.data.cardType) {
            this.binkCardInfo.cardType = res.data.cardType;
            this.binkCardInfo.parentBankName = res.data.parentBankName;
            this.binkCardInfo.ystMobile = res.data.ystMobile;
            let reg = /^(\d{4})\d+(\d{4})$/;
            this.showCard = this.binkCardInfo.cardType.replace(
              reg,
              "$1**********$2"
            );
          }
        }
        // console.log("银行卡信息", this.binkCardInfo);
      });
    },
    // 获取充值限额列表
    _getLimitList() {
      getLimitList().then((res) => {
        this.quotaData = res.data;
        // console.log("充值限额列表", this.quotaData);
      });
    },
    // 获取验证码
    _applybindBandcard() {
      if (this.dialogType == "bd") {
        this.getBindcardCode();
      } else if (this.dialogType == "jb") {
        this.getUnbindcardCode();
      } else if (this.dialogType == "cz") {
        this.getRechargeCode();
      } else if (this.dialogType == "tx") {
        this.getWithdrawalCode();
      }
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取绑定银行卡验证码
    getBindcardCode() {
      this.bindCardParams.ystMobile = this.binkCardInfo.ystMobile;
      if (this.bindCardParams.cardNo == "") {
        this.$message.error("请输入银行卡号");
      } else if (this.bindCardParams.ystMobile == "") {
        this.$message.error("请输入预留手机号");
      } else {
        // console.log("获取绑定银行卡验证码参数", this.bindCardParams);
        applybindBankcard(this.bindCardParams).then((res) => {
          // console.log("获取绑定银行卡验证码", res);
          if (res.code == 1) {
            this.countDown();
            this.$message.success("发送成功，请注意查收短信");
          } else {
            this.$message.error(res.msg || "发送失败");
          }
        });
      }
    },
    // 确认绑定
    _bindBankcard() {
      this.bindCardParams.code = this.verCode;
      this.bindCardParams.ystMobile = this.binkCardInfo.ystMobile;
      if (this.bindCardParams.cardNo == "") {
        this.$message.error("请输入银行卡号");
      } else if (this.bindCardParams.ystMobile == "") {
        this.$message.error("请输入银行卡预留手机号");
      } else if (this.bindCardParams.code == "") {
        this.$message.error("请输入验证码");
      } else {
        bindBankcard(this.bindCardParams).then((res) => {
          // console.log("确认绑定银行卡", res);
          if (res.code == 1) {
            this._checkBankCard();
            this.$message.success("银行卡绑定成功");
            this.backHandle();
          } else {
            this.$message.error(res.msg || "绑定失败");
          }
        });
      }
    },
    // 获取解绑银行卡验证码
    getUnbindcardCode() {
      this.unBindCardParams.cardNo = this.binkCardInfo.cardType;
      this.unBindCardParams.ystMobile = this.binkCardInfo.ystMobile;
      // console.log("获取解绑银行卡验证码参数", this.unBindCardParams);
      applyUnbindBankcard(this.unBindCardParams).then((res) => {
        // console.log("获取解绑银行卡验证码", res);
        if (res.code == 1) {
          this.countDown();
          this.$message.success("发送成功，请注意查收短信");
        } else {
          this.$message.error(res.msg || "发送失败");
        }
      });
    },
    // 确认解绑
    _unbindBankcard() {
      this.unBindCardParams.code = this.verCode;
      this.unBindCardParams.cardNo = this.binkCardInfo.cardType;
      this.unBindCardParams.ystMobile = this.binkCardInfo.ystMobile;
      if (this.unBindCardParams.code == "") {
        this.$message.error("请输入验证码");
      } else {
        // console.log("解绑银行卡参数", this.unBindCardParams);
        unBindBankcard(this.unBindCardParams).then((res) => {
          // console.log("确认解绑银行卡", res);
          if (res.code == 1) {
            // this._checkBankCard();
            this.$message.success("银行卡解绑成功");
            setTimeout(() => {
              window.location.reload();
            }, 1000);
            // this.backHandle();
          } else {
            this.$message.error(res.msg || "绑定失败");
          }
        });
      }
    },

    // 银行卡绑定/解绑
    unboundHandle(type) {
      this.verCode = "";
      this.cardHandleFlag = true;
      this.recordType = this.dialogType;
      this.dialogType = type;
    },
    // 返回
    backHandle() {
      this.dialogType = this.recordType;
      this.cardHandleFlag = false;
      this.quotaFlag = false;
      if (this.timer) {
        this.downShow = false;
        clearInterval(this.timer);
        this.timer = null;
      }
      this.verCode = "";
    },

    showCount() {
      this.countShow = !this.countShow;
    },
    // 关闭dialog窗口
    rchargeClose() {
      this.cardHandleFlag = false;
      this.showFlag = false;
      this.dialogType = "";
      this.quotaFlag = false;
      this.accountType = 0;
      if (this.timer) {
        this.downShow = false;
        clearInterval(this.timer);
        this.timer = null;
      }
      this.verCode = "";
      this.rechargeParams.money = "";
      this.rechargeParams.recharge_id = "";
      this.rechargeParams.code = "";

      this.withdrawalParams.money = "";
      this.companyWithdrawalParams.withdraw_id = "";
      this.companyWithdrawalParams.verificationCode = "";
      this.withdraw_id = -1;

      this.companyRechargeParams.money = "";
      this.companyWithdrawalParams.verificationCode = "";
    },
    // 打开充值/提现dialog
    openRcharge(type) {
      console.log("是否签署协议", this.checkSignCode);

      if (this.checkSignCode == 10021) {
        this.signFlag = true;
      } else if (this.checkSignCode == 10022) {
        this.showFlag = true;
        this.dialogType = type;
        if (this.memberInfo.yst_user_type == 1) {
          this.accountType = 2;
        } else {
          this.accountType = 0;
        }
      } else {
        this._checkSign(0);
      }
    },
    // 电子协议签署检测
    _checkSign(params) {
      if (params) {
        checkSign().then((res) => {
          // console.log("电子协议签署检测res", res);
          // res.code = 10021;
          if (res.code == 10021 || res.code == 10022) {
            this.checkSignCode = res.code;
          }
        });
      } else {
        checkSign().then((res) => {
          // console.log("电子协议签署检测res", res);
          // res.code = 10021;
          if (res.code == 10021 || res.code == 10022) {
            this.checkSignCode = res.code;
            this.openRcharge(this.dialogType);
          }
        });
      }
    },
    // 打开查看银行限额
    quotaHandle() {
      this.recordType = this.dialogType;
      this.quotaFlag = true;
      this.dialogType = "xe";
    },
    // 提现/充值确认
    dealHandle() {
      if (
        (!this.binkCardInfo.cardType &&
          this.accountType &&
          this.dialogType == "tx") ||
        (this.accountType == 2 &&
          this.dialogType == "cz" &&
          !this.binkCardInfo.cardType)
      ) {
        this.$message.error("请先绑定银行卡");
      } else if (
        this.dialogType == "tx" &&
        this.memberInfo.yst_user_type == 1
      ) {
        // 个人提现
        this.withdrawalHandle();
      } else if (
        this.dialogType == "tx" &&
        this.memberInfo.yst_user_type == 2
      ) {
        // 对公账户或法人提现
        this.companyWithdrawalHandle();
      } else if (this.dialogType == "cz" && this.accountType) {
        // 个人充值
        this.rechargeHandle();
      } else if (this.dialogType == "cz" && !this.accountType) {
        // 企业充值
        this.companyRechargeHandle();
      }
    },
    // 个人提现申请
    withdrawalHandle() {
      if (this.withdrawalParams.money == "") {
        this.$message.error("请输入提现金额");
      } else if (
        +this.withdrawalParams.money > +this.accountInfo.usable_capital
      ) {
        this.$message.error("可用余额不足");
      } else if (this.withdrawalParams.money <= 100) {
        this.$message.error("单次提现金额应为100元以上");
      } else {
        this.loadingText = "提现处理中";
        this.loading = true;
        let params = {
          money: this.withdrawalParams.money,
        };
        withdrawBuy(params).then((res) => {
          console.log("个人提现", res);
          if (res.code == 1) {
            this.loading = false;
            this.loadingText = "";
            window.open(res.data.url, "_self");
          } else {
            this.loading = false;
            this.loadingText = "";
            this.$message.error(res.msg || "提现失败");
          }
        });
      }
    },
    // 企业提现
    companyWithdrawalHandle() {
      if (this.withdrawalParams.money == "") {
        this.$message.error("请输入提现金额");
      } else if (
        +this.withdrawalParams.money > +this.accountInfo.usable_capital
      ) {
        this.$message.error("可用余额不足");
      } else if (this.withdrawalParams.money <= 100) {
        this.$message.error("单次提现金额应为100元以上");
      } else if (this.verCode == "") {
        this.$message.error("请输入验证码");
      } else {
        this._confirmWithdrawBuyCompany();
      }
    },

    // 企业提现申请
    getWithdrawalCode() {
      console.log("余额", this.accountInfo.usable_capital);
      if (
        this.accountType &&
        !this.binkCardInfo.cardType
        // &&
        // this.dialogType == "cz" &&
        // this.accountType != 1
      ) {
        this.$message.error("请先绑定银行卡");
      } else if (this.withdrawalParams.money == "") {
        this.$message.error("请输入提现金额");
      } else if (
        +this.withdrawalParams.money > +this.accountInfo.usable_capital
      ) {
        this.$message.error("可用余额不足");
      } else if (this.withdrawalParams.money <= 100) {
        this.$message.error("单次提现金额应为100元以上");
      } else {
        let params = {
          money: this.withdrawalParams.money,
          cardType: this.accountType ? 1 : 2,
          withdraw_id: this.withdraw_id,
        };
        console.log("企业提现申请参数", params);
        withdrawBuyCompany(params).then((res) => {
          console.log("企业提现申请", res);
          if (res.code == 1) {
            this.countDown();
            this.$message.success("发送成功，请注意查收短信");
            this.companyWithdrawalParams.withdraw_id = res.data.withdraw_id;
            this.withdraw_id = res.data.withdraw_id;
            // let codeParams = {
            //   withdraw_id: res.data.withdraw_id
            // };
            // this._resendWithdrawCode(codeParams);
          } else if (res.code == 10044) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                window.open(res.data.url, "_self");
              })
              .catch(() => {});
          } else {
            this.$message.error(res.msg || "发送失败");
          }
        });
      }
    },
    // 企业提现获取验证码
    // _resendWithdrawCode(codeParams) {
    //   resendWithdrawCode(codeParams).then(res => {
    //     // console.log("企业提现申请获取验证码", res);
    //     if (res.code == 1) {
    //       this.countDown();
    //       this.$message.success("发送成功，请注意查收短信");
    //     } else if (res.code == 10044) {
    //       this.$confirm(res.msg, "提示", {
    //         confirmButtonText: "确定",
    //         cancelButtonText: "取消",
    //         type: "warning"
    //       })
    //         .then(() => {
    //           window.open(res.data.url, "_self");
    //         })
    //         .catch(() => {});
    //     } else {
    //       this.$message.error(res.msg || "发送失败");
    //     }
    //   });
    // },
    // 企业提现确认
    _confirmWithdrawBuyCompany() {
      this.loadingText = "提现处理中";
      this.loading = true;
      this.companyWithdrawalParams.verificationCode = this.verCode;
      console.log("企业提现确认参数", this.companyWithdrawalParams);
      confirmWithdrawBuyCompany(this.companyWithdrawalParams).then((res) => {
        console.log("企业提现确认", res);
        if (res.code == 1) {
          this.loading = false;
          this.loadingText = "";
          this.$message.success("提现申请成功");
          window.location.reload();
        } else {
          this.loading = false;
          this.loadingText = "";
          this.$message.error(res.msg || "提现失败");
        }
        // else if (res.code == 10044) {
        //   this.loading = false;
        //   this.loadingText = "";
        //   this.$confirm(res.msg, "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   })
        //     .then(() => {
        //       window.open(res.data.url, "_self");
        //     })
        //     .catch(() => {});
        // }
      });
    },
    //确认充值
    rechargeHandle() {
      this.rechargeParams.cardType = 1;
      console.log("个人网银充值参数", this.rechargeParams);
      if (this.rechargeParams.money == "") {
        this.$message.error("请输入充值金额");
      } else if (this.rechargeParams.money < 2) {
        this.$message.error("单次充值最低金额应为2元");
      } else if (this.accountType == 1) {
        // 充值-个人网银接口
        this.loadingText = "充值处理中";
        this.loading = true;
        rechargeBuy(this.rechargeParams).then((res) => {
          console.log("个人网银充值", res);
          if (res.code == 1) {
            this.loading = false;
            this.loadingText = "";
            window.open(res.data.url, "_self");
          } else {
            this.$message.error(res.msg || "充值失败");
            this.loading = false;
            this.loadingText = "";
          }
        });
      } else if (this.accountType == 2) {
        // 充值-快捷支付接口
        if (this.verCode == "") {
          this.$message.error("请输入短信验证码");
        } else {
          this.loadingText = "充值处理中";
          this.loading = true;
          this.rechargeParams.code = this.verCode;
          console.log("快捷充值参数", this.rechargeParams);
          rechargeQuickbuy(this.rechargeParams).then((res) => {
            console.log("快捷充值发起支付", res);
            if (res.code == 1) {
              this.loading = false;
              this.loadingText = "";
              this.$message.success("充值成功，正在为您跳转...");
              setTimeout(() => {
                location.reload();
              }, 2000);
            } else {
              this.$message.error(res.msg || "充值失败");
              this.loading = false;
              this.loadingText = "";
            }
          });
        }
      }
    },
    // 充值-快捷支付-1.发送验证码
    getRechargeCode() {
      if (!this.binkCardInfo.cardType) {
        this.$message.error("请先绑定银行卡");
      } else if (this.rechargeParams.money == "") {
        this.$message.error("请输入充值金额");
      } else if (this.rechargeParams.money < 2) {
        this.$message.error("单次充值最低金额应为2元");
      } else {
        let params = {
          money: this.rechargeParams.money,
        };
        console.log("充值快捷支付发送验证码参数", params);
        rechargeGetquick(params).then((res) => {
          console.log("获取快捷充值验证码", res);
          if (res.code == 1) {
            this.countDown();
            this.rechargeParams.recharge_id = res.data.recharge_id;
            this.$message.success("发送成功，请注意查收短信");
          } else {
            this.$message.error(res.msg || "发送失败");
          }
        });
      }
    },
    // 企业网银充值
    companyRechargeHandle() {
      if (this.rechargeParams.money == "") {
        this.$message.error("请输入充值金额");
      } else if (this.rechargeParams.money < 2) {
        this.$message.error("单次充值最低金额应为2元");
      } else {
        this.loadingText = "充值处理中";
        this.loading = true;
        this.companyRechargeParams.money = this.rechargeParams.money;
        this.companyRechargeParams.cardType = 2;
        rechargeBuy(this.companyRechargeParams).then((res) => {
          console.log("企业网银充值", res);
          if (res.code == 1) {
            this.loading = false;
            this.loadingText = "";
            window.open(res.data.url, "_self");
          } else {
            this.$message.error(res.msg || "充值失败");
            this.loading = false;
            this.loadingText = "";
          }
        });
      }
    },
    // 支持银行
    supportBankHandle() {
      this.supportBankFlag = true;
    },
  },
};
</script>
<style lang="scss">
.assets-panel {
  .el-dialog {
    width: 100%;
    min-height: 800px;
    background: #fff;
    margin-top: 5vh !important;
    &.transfer-dialog {
      min-height: 565px;
      margin-top: 15vh !important;
      .el-dialog__header {
        border: none;
      }
      .el-dialog__body {
        padding: 0 40px;
      }
    }
    &.sign-dialog {
      min-height: 260px;
      margin-top: 25vh !important;
      .el-dialog__header {
        border: none;
      }
      .el-dialog__body {
        padding: 30px 0;
        .signFlag-content {
          text-align: center;
          .signFlag-img {
            width: 50px;
            height: 50px;
          }
          h2 {
            font-size: 16px;
            font-weight: 400;
            color: #333;
            line-height: 0;
          }
          p {
            line-height: 0;
            margin: 25px 0 30px 0;
          }
          .el-button {
            width: 150px;
            height: 45px;
            background: #ff6f47;
            border: none;
            color: #fff;
            &:hover {
              background: #ff7f5b;
            }
          }
          span {
            display: block;
            cursor: pointer;
          }
        }
      }
    }
    &.noBorder-dialog-wrap {
      .el-dialog__footer {
        border: none;
        padding-top: 0;
      }
    }
    .el-dialog__header {
      border-bottom: 1px solid rgba(234, 239, 251, 1);
      padding-bottom: 15px;
      .dialog-title {
        i {
          padding: 3px 2px;
          background: #fe6616;
          margin-right: 15px;
          border-radius: 10px;
        }
        span {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .el-dialog__body {
      padding: 40px;
      .quota-content {
        .el-table {
          .el-table__body-wrapper {
            scrollbar-arrow-color: #fff; /**/ /*三角箭头的颜色*/
            scrollbar-face-color: #f0f9fc; /**/ /*立体滚动条的颜色*/
            scrollbar-3dlight-color: #f0f9fc; /**/ /*立体滚动条亮边的颜色*/
            scrollbar-highlight-color: #f0f9fc; /**/ /*滚动条空白部分的颜色*/
            scrollbar-shadow-color: #f0f9fc; /**/ /*立体滚动条阴影的颜色*/
            scrollbar-darkshadow-color: #f0f9fc; /**/ /*立体滚动条强阴影的颜色*/
            scrollbar-track-color: #fff; /**/ /*立体滚动条背景颜色*/
            scrollbar-base-color: #f0f9fc; /**/ /*滚动条的基本颜色*/
            &::-webkit-scrollbar {
              width: auto;
            }
            &::-webkit-scrollbar-track {
              background-color: #fff;
            }
            &::-webkit-scrollbar-thumb {
              background-color: #f0f9fc;
            }
          }
        }
        .el-button {
          display: block;
          font-size: 16px;
          width: 290px;
          height: 45px;
          background: #ff6f47;
          border-radius: 2px;
          margin: 0 auto;
          margin-top: 40px;
          &:hover {
            background: #ff7f5b;
          }
        }
      }
      .dialog-content {
        .content-top {
          height: 127px;
          background: #e4f7f9;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 26px;
          position: relative;
          text-align: center;
          .record-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            cursor: pointer;
            &:hover {
              color: #ff7f5b;
            }
          }
          .balance-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .balance-num {
              font-size: 24px;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
              margin-bottom: 2px;
              .rmb {
                font-size: 14px;
              }
            }
          }
        }
        .content-form {
          width: 385px;
          margin: 40px auto;
          margin-bottom: 0;
          .double-btn-box {
            width: 290px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            margin-top: 90px;
            .double-btn-item {
              width: 135px;
              &.back-btn {
                background: #fff;
                color: #ff6f47;
              }
            }
          }
          .el-form {
            margin-bottom: 40px;
            .el-form-item {
              margin-bottom: 20px;
              position: relative;
              .addCard-btn {
                position: absolute;
                right: 60px;
                font-size: 14px;
                font-weight: 400;
                text-decoration: underline;
                color: rgba(72, 176, 250, 1);
                cursor: pointer;
              }
              &:last-of-type {
                margin: 0;
              }
              .el-form-item__label {
                width: 105px;
                font-size: 14px;
                padding-right: 5px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
              }
              .el-form-item__content {
                .group-style {
                  .el-radio {
                    margin-right: 15px;
                    &:last-of-type {
                      margin-right: 0;
                    }
                  }
                }
                .el-input {
                  width: 230px;
                  .el-input__inner {
                    padding: 0 10px;
                  }
                  &.code-inp {
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    position: relative;
                    .el-input__inner {
                      width: 160px;
                      border: none;
                    }
                  }
                }
                .unbound {
                  &.code-btn {
                    position: absolute;
                    right: 60px;
                    &.quota-btn {
                      color: #999;
                    }
                    &.downNum-btn {
                      color: #c0c4cc;
                      cursor: default;
                      text-decoration: none;
                      right: 43px;
                      top: 2px;
                    }
                  }
                }
                .el-form-item__error {
                  left: 100px;
                }
                .unbound {
                  margin-left: 15px;
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  text-decoration: underline;
                  color: rgba(247, 96, 96, 1);
                  cursor: pointer;
                  &.code-btn {
                    color: #48b0fa;
                  }
                }
                .cardNumber-p {
                  line-height: 0;
                  font-size: 15px;
                  color: #333;
                  display: inline-block;
                  vertical-align: middle;
                }
                .bankName {
                  font-size: 12px;
                  color: #999;
                  padding: 4px 5px;
                  background: #f5f5f5;
                  border-radius: 4px;
                  margin-left: 10px;
                }
                .supportBank {
                  font-size: 12px;
                  color: #999;
                  position: absolute;
                  right: -20px;
                  text-decoration: underline;
                  cursor: pointer;
                  &.sxf {
                    right: 50px;
                    color: #ccc;
                    text-decoration: initial;
                    cursor: initial;
                    .sxfNum {
                      color: red;
                    }
                  }
                }
              }
            }
          }
          .el-button {
            display: block;
            font-size: 16px;
            width: 290px;
            height: 45px;
            background: #ff6f47;
            border-color: #ff6f47;
            border-radius: 2px;
            margin: 0 auto;
            &:hover {
              background: #ff7f5b;
            }
            &.disabled-btn {
              background: #e0e0e0;
              border-color: #e0e0e0;
              &:hover {
                background: #e0e0e0;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      background: #fff;
      padding: 25px 40px;
      border-top: 1px solid #ebf0f2;
      text-align: left;
      width: 100%;
      .dialog-footer {
        .footer-wrap {
          h2 {
            font-size: 16px;
            color: #333;
            font-weight: bold;
            span {
              color: red;
            }
          }
          p {
            color: #999;
            &.rcharge-p {
              line-height: 24px;
            }
          }
        }
      }
    }
    &.supportBank-dialog {
      .supportBank-content {
        max-height: 700px;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        padding-right: 15px;
        &::-webkit-scrollbar {
          width: 3px;
        }
        &::-webkit-scrollbar-track {
          background-color: #e6e6e6;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #ff7f5b;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
        }
        .supportBank-item {
          width: 25%;
          box-sizing: border-box;
          border: 1px solid #e6e6e6;
          padding: 15px 0;
          text-align: center;
          margin-right: -1px;
          margin-bottom: -1px;
          &:last-of-type {
            margin-bottom: 0;
          }
          &:nth-last-of-type(2) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.assets-panel {
  width: 45%;
  position: relative;
  color: #003333;
  font-size: 14px;
  .assets-panel-wrap {
    width: 84%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16%;
    .assets-count {
      height: 50px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 23px;
      &::before {
        content: "";
        width: 3px;
        height: 100%;
        background: #ed6c44;
        border-radius: 0 8px 8px 0;
        position: absolute;
        top: 0;
        left: 0;
      }
      &:nth-of-type(2) {
        margin-bottom: 33px;
        &::before {
          background: #4bc5c3;
        }
      }
      .card-panel-num {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        position: absolute;
        bottom: 0;
        left: 85px;
      }
    }
    .btn-wrapper {
      .assets-btn {
        width: 27%;
        height: 30px;
        border: 1px solid #ff6f47;
        color: #fff;
        line-height: 11px;
        &.assets-btn-tx {
          color: #ff6f47;
        }
        &.assets-btn-cz {
          background: #ff6f47;
          &:hover {
            background: #ff7f5b;
          }
        }
      }
    }
  }
  .show-count {
    position: absolute;
    right: 30px;
    top: 16px;
    font-size: 24px;
    color: #b2aead;
    cursor: pointer;
  }
}
</style>
